import React, { Component } from 'react'
import io from "socket.io-client";
// import { post } from 'utils/http'
import { getPay } from 'api/weifeng'
import { Button, Flex } from 'antd-mobile';
import { Toast} from 'antd-mobile';
export default class mine extends Component {
    state={
        result:''
    }
    constructor() {
        super()
        this.id = 342325;
    }
    getResult() {
        const socket = io("http://walter666.cn:7000/");
        socket.on("payResult", (data) => {
             this.res=data=='success'?'支付成功':'支付失败'
            this.setState({
                result:this.res
            })
            Toast.success(this.res+'!!!', 3);

            setTimeout(()=>{
                this.setState({
                    result:''
                })
            },5000)
        });
    }

    async getGenralList(id) {
        this.result = await getPay({
            detail: 'wilson的订单',
            out_trade_no: id
        })
        this.setState({
            jpg: this.result.data
        })

        this.getResult()

    }
    payHandleClick = () => {
        this.id += Math.floor(Math.random()*10+Math.random()*100000);
        this.getGenralList(this.id)
        console.log(this.id)
    }
    render() {
        return (
            <div style={
                {
                    height: '100%',
                    width: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    
                }
            }>

                {this.state && <img src={this.state.jpg} alt="" style={{
                    marginBottom:'0.1rem'
                }} />}

                <Button onClick={this.payHandleClick}>
                    <span style={{
                    padding: '0.1rem 0.2rem',
                    
                    }}>
                    获取二维码
                    </span></Button>
                <p
                    style={this.state.result=='支付成功'?{color:'green',marginTop:'0.2rem'}:{color:'red',marginTop:'0.2rem'}}
                >

                    {/* <button onClick={this.showToast}>点击提示</button> */}
                    {this.state.result}
                </p>
            </div>


        )
    }
}
